<template>
  <a-card class="ax_sticky_top mb-8" title="数据库列表">
    <template #extra>
      <a-tooltip title="前往帮助中心">
        <a
          class="system__icon"
          target="_blank"
          href="https://www.yuque.com/u32997899/ax/texzsqhcl7r1k953?singleDoc# 《多页生成》"
        >
          <QuestionCircleTwoTone />
        </a>
      </a-tooltip>
    </template>
    <a-flex :justify="'space-between'">
      <a-flex :justify="'center'">
        <a-flex :gap="4" :justify="'space-between'" :align="'center'">
          <a-tooltip title="导入数据库">
            <a-button @click="importDb" type="primary">
              <ImportOutlined />
              数据库
            </a-button>
          </a-tooltip>
          <a-tooltip title="刷新">
            <a-button type="link" @click="codeList" :disabled="codeTable.loading">
              <ReloadOutlined />
            </a-button>
          </a-tooltip>
          <a-input-search
            v-model:value="codeTable.query.tableName"
            placeholder="请输入表名"
            @search="codeList"
            allow-clear
          ></a-input-search>
        </a-flex>
      </a-flex>
      <a-flex :gap="8">

        <a-dropdown trigger="click" :disabled="codeTable.keys.length !== 1">
          <a-button :disabled="codeTable.keys.length !== 1">
            预览
            <EyeOutlined />
          </a-button>
          <template #overlay>
            <a-menu :items="codeMenus" @click="preview"></a-menu>
          </template>
        </a-dropdown>

        <a-dropdown trigger="click" :disabled="codeTable.keys.length !== 1">
          <a-button :disabled="codeTable.keys.length !== 1">
            下载
            <DownloadOutlined />
          </a-button>
          <template #overlay>
            <a-menu :items="codeMenus" @click="downloadCode"></a-menu>
          </template>
        </a-dropdown>
        <FieldVue
          :raw="codeRawColumns"
          :columns="codeColumns"
          :module-name="codeTable.moduleName"
        />
      </a-flex>
    </a-flex>
  </a-card>
</template>

<script setup lang="ts">
import FieldVue from '@/views/components/table/Field.vue';
import type { ReloadOutlined } from '@ant-design/icons-vue';
import { codeColumns, codeRawColumns } from '../data/column';
import { codeList, importDb } from '../data/curd';

import { batchGenCode, previewCode } from '@/api/modules/tool/gen/gen';
import { getTempId, openWindow } from '@/global/window/window';
import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { currentCode } from '../data/form';
import { codeMenus } from '../data/options';
import { codeTable } from '../data/table';
import PreviewVue from '../subpage/preview/Preview.vue';

const downloadCode = (info: MenuInfo) => {
  const key: any = info.key;
  if (currentCode.value) {
    batchGenCode([currentCode.value.tableName], key);
  }
};

const preview = async (info: MenuInfo) => {
  const key: any = info.key;
  const { data } = await previewCode(currentCode.value!.tableId, key);
  openWindow({
    title: '代码预览',
    component: markRaw(PreviewVue),
    data: data.data,
    id: getTempId(),
    dark: true,
  });
};
</script>

<style lang="scss" scoped>
.ax_sticky_top {
  position: sticky;
  top: 0;
  z-index: 10;
}
</style>
